<div class="field-wrapper" [zeprideAuthority]="zeprideAuthorityData">
    <div class="search-bar-panel">
        <div class="search-wrapper">
            <div class="query-item-wrapper">
                <div *ngFor="let item of queryList" class="bar-item">
                    <label class="label" nz-tooltip>{{item.title}}</label>
                    <ng-container *ngIf="item.ctrlType == 'input' || !item.ctrlType">
                        <input [disabled]="!searchable" class="content" type="text" nz-input [(ngModel)]="item.value">
                    </ng-container>
                    <ng-container *ngIf="item.ctrlType == 'select'">
                        <nz-select [nzDisabled]="!searchable" nzAllowClear="true" class="content"
                            style="min-width:150px;" nzPlaceHolder="请选择" [(ngModel)]="item.value">
                            <nz-option [nzValue]="v.value" [nzLabel]="v.value" *ngFor="let v of item.ds">
                            </nz-option>
                        </nz-select>
                    </ng-container>
                    <ng-container *ngIf="item.ctrlType == 'date'">
                        <nz-range-picker class="content" [nzDisabled]="!searchable" [(ngModel)]="item.value"
                            (ngModelChange)="onChange($event, item)" [nzShowTime]="true">
                        </nz-range-picker>
                    </ng-container>
                    <ng-container *ngIf="item.ctrlType == 'address'">
                        <nz-cascader class="content" [nzDisabled]="!searchable" nzChangeOnSelect
                            [nzLabelProperty]="'name'" [nzValueProperty]="'name'" [nzOptions]="addressOptions"
                            [(ngModel)]="addressData" (ngModelChange)="addressChange($event, item)"></nz-cascader>
                    </ng-container>
                    <ng-container *ngIf="item.ctrlType == 'flowNode'">
                        <nz-select class="content" style="min-width:150px;" [(ngModel)]="item.value" nzAllowClear>
                            <nz-option *ngFor="let name of flowNodeNames" [nzLabel]="name" [nzValue]="name"></nz-option>
                        </nz-select>
                    </ng-container>
                    <ng-container *ngIf="item.ctrlType == 'flowStatus'">
                        <nz-select class="content" style="min-width:150px;" [(ngModel)]="item.value" nzAllowClear>
                            <nz-option nzValue="" nzLabel="进行中"></nz-option>
                            <nz-option nzValue="complete" nzLabel="已完成"></nz-option>
                            <nz-option nzValue="suspend" nzLabel="已暂停"></nz-option>
                            <nz-option nzValue="closed" nzLabel="已终止"></nz-option>
                        </nz-select>
                    </ng-container>
                </div>
            </div>
            <div class="query-item-wrapper ex-query" [ngClass]="{'expand': expand}">
                <ng-container *ngTemplateOutlet="exQueryPanel"></ng-container>
            </div>
        </div>

        <a nz-button nzType="link" [ngClass]="{'expand': expand}" (click)="expand=!expand"
            *ngIf="exQueryList && exQueryList.length">
            <span>{{expand ? '收起' : '展开'}}</span>
            <i class="iconfont icon-arrow-down-s-line"></i>
        </a>
        <button nz-tooltip nzTooltipTitle="查询" class="icon-line-height icon-btn search-btn" nz-button nzType="primary"
            (click)="query()">
            <i class="iconfont icon-search-line"></i>
        </button>
        <button nz-tooltip nzTooltipTitle="清空" class="icon-line-height icon-btn" [disabled]="!editable" nz-button
            (click)="clean()">
            <i class="iconfont icon-brush-2-line"></i>
        </button>
        <button nz-tooltip nzTooltipTitle="导出" class="icon-line-height icon-btn"
            *ngIf="componentData.extends && componentData.extends.exportable" [disabled]="!exportable" nz-button
            (click)="export()">
            <i class="iconfont icon-download-2-line"></i>
        </button>
    </div>
</div>

<ng-template #exQueryPanel>
    <div class="bar-item" *ngFor="let item of exQueryList">
        <label class="label" nz-tooltip>{{item.title}}</label>
        <ng-container *ngIf="item.ctrlType == 'input' || !item.ctrlType">
            <input class="content" type="text" nz-input [disabled]="!searchable" [(ngModel)]="item.value">
        </ng-container>
        <ng-container *ngIf="item.ctrlType == 'select'">
            <nz-select [nzDisabled]="!searchable" nzAllowClear="true" class="content" style="min-width:150px;"
                nzPlaceHolder="请选择" [(ngModel)]="item.value">
                <nz-option [nzValue]="v.value" [nzLabel]="v.value" *ngFor="let v of item.ds">
                </nz-option>
            </nz-select>
        </ng-container>
        <ng-container *ngIf="item.ctrlType == 'date'">
            <nz-range-picker [nzDisabled]="!searchable" [(ngModel)]="item.value"
                (ngModelChange)="onChange($event, item)" [nzShowTime]="true">
            </nz-range-picker>
        </ng-container>
        <ng-container *ngIf="item.ctrlType == 'address'">
            <nz-cascader [nzDisabled]="!searchable" nzChangeOnSelect [nzLabelProperty]="'name'"
                [nzValueProperty]="'name'" [nzOptions]="addressOptions" [(ngModel)]="addressData"
                (ngModelChange)="addressChange($event, item)">
            </nz-cascader>
        </ng-container>
    </div>
</ng-template>